import React from 'react'
import './Main.scss'
import NavHeader from 'component/NavHeader/NavHeader'
class Main extends React.Component {
  constructor(props) {
    super(props)
    this.maxCount = 140
    this.state = {
      count: this.maxCount,
      startIndex: 0
    }
  }
  lightStar(i) {
    this.setState({
      startIndex: i + 1
    })
  }
  renderTest () {
  }
  renderStar() {
    let array = []
    for (let i = 0; i < 5; i++) {
      let cls = i < this.state.startIndex ? 'star-item light' : 'star-item'
      array.push(
        <div className={cls} key={i} onClick={() => this.lightStar(i)} />
      )
    }
    return array
  }
  onInput(value) {
    if (!this.chineseInputing) {
      this.setState({
        count: this.maxCount - value.length
      })
    }
  }
  componentDidMount() {
    this.commentInput.addEventListener('compositionstart', () => {
      this.chineseInputing = true
    })
    this.commentInput.addEventListener('compositionend', e => {
      this.chineseInputing = false
      this.onInput(e.target.value)
    })
  }
  render() {
    return (
      <div className="evaluate">
        <NavHeader title="评价" />
        <div className="content">
          <div className="star">{this.renderStar()}</div>
          <div className="text">
            <textarea
              ref={ref => {
                this.commentInput = ref
              }}
              className="text-area"
              minLength="140"
              placeholder="亲，菜品的口味如何，商家的服务是否周到?"
              onChange={e => {
                this.onInput(e.target.value)
              }}
            />
            <span className="count">{this.state.count}</span>
          </div>
          <div className="des">+厚切鸡排 香辣口水鸡饭. 中辣</div>
        </div>
        <div className="submit">
          <div className="sunmit-text"> 提交评价</div>
        </div>
      </div>
    )
  }
}
export default Main
